<template>
	<view class="list-box">
		<view class="title space-between center">
			<view class="center">
				<text class="name">{{name}}</text>
				<text class="word" v-if="word">{{word}}</text>
			</view>
			<!-- 全部按钮，点击跳转到搜索页 -->
			<view class="all" @click="toSearchPage" >
				<text >全部</text>
				<text class="iconfont icon-right"></text>
			</view>
		</view>
		<!-- 插槽，用于插入列表内容 -->
		<slot></slot>
	</view>
</template>

<script>
	import courseData from '@/mock/courseData.js'
	export default {
		props: {
			name: {
				type: String,
				default: '热门推荐'
			},
			// 热词标签文字
			word: { // HOT
				type: String,
				default: null
			},

			// 点击`全部`按钮要向搜索页传递的查询条件
			params: Object,
		},

		// 组件方法
		methods: {
			// 跳转到搜索页查询对应数据
			toSearchPage() {
				console.log('跳转搜索页', this.params)
				// 跳转到搜索页面，传递查询参数
				this.navTo(`/pages/search/search?params=${ JSON.stringify(this.params) }`)
			}
		}
	}
</script>

<style lang="scss">
	// 列表盒子样式
	.list-box {
		margin-top: 60rpx;  // 上外边距
		.name {
			font-size: 38rpx;   // 字体大小
			font-weight: 500;   // 字体粗细
			color: #303133;     // 文字颜色
			margin-right: 10rpx; // 右外边距
		}
		.word {
			font-size: 20rpx;   // 字体大小
			background-image: linear-gradient(to right, $mxg-color-orange, $mxg-text-color-red); // 渐变背景
			color: #fff;        // 文字颜色
			padding: 0 10rpx;   // 左右内边距
			border-radius: 30rpx 30rpx 30rpx 0; // 圆角
		}
		.all {
			font-weight: normal;  // 字体粗细
			color: $mxg-text-color-grey; // 文字颜色
			font-size: 28rpx;     // 字体大小
			.iconfont {
				font-size: 25rpx;   // 图标字体大小
			}
		}
	}
</style>
